<template>
    <div class="w750" :class="themes.theme">
        <div class="head">
            <div class="font-14 p-15p text-white">当前等级：白银会员</div>
            <!-- 滚动盒子 给盒子高度为了隐藏滚动条-->
            <div class="overflow-x-scroll" ref="vipref" style="height: 200px">
                <div class="vipBox">
                    <!-- 白银 -->
                    <div class="width33 text-center position-relative" @click="scroll(0, 1)">
                        <!-- 进度条 -->
                        <div class="divider" :style="currentId >= 1 ? 'background:#fff' : ''" />
                        <div class="center-x mt">
                            <!-- 等级 点击或已达成都为白色active 默认为 defalut-->
                            <div class="defalut" :class="{ active: activeIndex == 1 || 1 < currentId }">V1</div>
                            <span>白银会员</span>
                        </div>
                    </div>
                    <!-- 铂金 -->
                    <div class="width33" style="text-align: center; padding-top: 16px" @click="scroll(0, 2)">
                        <div class="position-relative d-flex flex-column a-center">
                            <!-- 进度条 -->
                            <div class="divider" style="top: 46%" :style="currentId >= 2 ? 'background:#fff' : ''" />
                            <div class="imgBg" />
                            <div style="width: 50px; height: 50px">
                                <img src="../../../assets/images/detailDefault.jpg" alt="" class="h-100 rounded-circle" />
                            </div>
                            <!-- 等级 点击或已达成都为白色active 默认为 defalut-->
                            <div class="active position-absolute" style="bottom: -15px">V2</div>
                        </div>
                        <span class="d-inline-block" style="margin-top: 15px">铂金会员</span>
                    </div>
                    <!-- 黄金 -->
                    <div class="width33 text-center position-relative" @click="scroll(1, 3)">
                        <!-- 进度条 -->
                        <div class="divider" :style="currentId >= 3 ? 'background:#fff' : ''" />
                        <div class="center-x mt">
                            <!-- 等级 点击或已达成都为白色active 默认为 defalut-->
                            <div class="defalut" :class="{ active: activeIndex == 3 }">V3</div>
                            <span>黄金会员</span>
                        </div>
                    </div>
                    <div class="width33 text-center position-relative" @click="scroll(2, 4)">
                        <!-- 进度条 -->
                        <div class="divider" :style="currentId >= 4 ? 'background:#fff' : ''" />
                        <div class="center-x mt">
                            <!-- 等级 点击或已达成都为白色active 默认为 defalut-->
                            <div class="defalut" :class="{ active: activeIndex == 4 }">V4</div>
                            <span>黄金会员</span>
                        </div>
                    </div>
                    <div class="width33 text-center position-relative" @click="scroll(3, 5)">
                        <!-- 进度条 -->
                        <div class="divider" :style="currentId >= 5 ? 'background:#fff' : ''" />
                        <div class="center-x mt">
                            <!-- 等级 点击或已达成都为白色active 默认为 defalut-->
                            <div class="defalut" :class="{ active: activeIndex == 5 }">V5</div>
                            <span>黄金会员</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" v-if="activeIndex == 1">
            <div class="font-18 font-weight-600">白银会员权益</div>
            <div class="bg-white mt-2 rounded-14">
                <div class="grid-column4">
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true" style="">
                                    <use xlink:href="#icondiscount"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">商品优惠</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconteam"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">团队奖励</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconextension"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">推广奖励</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconshopcart"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">自购奖励</div>
                    </div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
        </div>
        <div class="container" v-if="activeIndex == 2">
            <div class="font-18 font-weight-600">铂金会员权益</div>
            <div class="bg-white mt-2 rounded-14">
                <div class="grid-column4">
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true" style="">
                                    <use xlink:href="#icondiscount"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">商品优惠</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconteam"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">团队奖励</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconextension"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">推广奖励</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconshopcart"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">自购奖励</div>
                    </div>
                    <!-- <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icondiscount"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">商品优惠</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconteam"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">团队奖励</div>
                    </div> -->
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
        </div>
        <div class="container" v-if="activeIndex == 3">
            <div class="font-18 font-weight-600">黄金会员权益</div>
            <div class="bg-white mt-2 rounded-14">
                <div class="grid-column4">
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item" :style="currentId < 3 ? 'background:#e4e4e4' : ''">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icondiscount"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">商品优惠</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item" :style="currentId < 3 ? 'background:#e4e4e4' : ''">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconteam"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">团队奖励</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item" :style="currentId < 3 ? 'background:#e4e4e4' : ''">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconextension"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">推广奖励</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item" :style="currentId < 3 ? 'background:#e4e4e4' : ''">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconshopcart"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">自购奖励</div>
                    </div>
                    <!-- <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icondiscount"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">商品优惠</div>
                    </div>
                    <div class="text-center">
                        <div class="flex-center">
                            <div class="right-item">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconteam"></use>
                                </svg>
                            </div>
                        </div>
                        <div class="font-12 mt text-333">团队奖励</div>
                    </div> -->
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
            <div class="mt-2">
                <div class="text">
                    <ol>
                        <li class="text-14 font-weight-600 text-333 mx-2 my-1">商品优惠</li>
                    </ol>
                    <div class="font-14 font-weight-400 text-666">这是一个商品优惠的说明文案，打折x折，x是后台设置的值，预留两行文字</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getShareRule } from 'api/extensionApi'

export default {
    components: {},
    data() {
        return {
            activeIndex: 1,
            currentId: 2
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    mounted() {
        this.activeIndex = this.currentId
        this.getRuleDetail()
    },
    methods: {
        // 返回
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        scroll(index, num) {
            this.$nextTick(() => {
                // // document.documentElement.clientWidth ==> 可见区域宽度
                let screnWidth = document.documentElement.clientWidth / 3
                this.$refs['vipref'].scrollLeft = index * screnWidth
                this.activeIndex = num
            })
        },
        getRuleDetail() {
            getShareRule().then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
            })
        }
    }
}
</script>
<style scoped>
.head {
    width: 100%;
    height: 200px;
    /* ruleDeclaration-bg.png */
    background: url('~@/assets/images/ruleDeclaration-bg.png') no-repeat right bottom, linear-gradient(360deg, #335798 0%, #6b95d4 100%);
}
.container {
    position: absolute;
    top: 170px;
    background: #f8f8f8;
    border-radius: 15px;
    padding: 20px;
    height: 100%;
}
.icon {
    width: 29px;
    height: 29px;
    vertical-align: -0.15em;
    overflow: hidden;
    fill: currentColor;
    z-index: 100;
    color: #fff;
}

.right-item {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    background: linear-gradient(180deg, #6596e0 0%, #3665b0 100%);
}
.text-center {
    margin: 20px 0;
}
.text ol li {
    list-style: initial;
}
.text div {
    line-height: 20px;
}

.vipBox {
    display: flex;
}
.defalut {
    width: 25px;
    height: 25px;
    background: #465d81;
    font-size: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
    line-height: 27px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.5);
}
.vipBox .active {
    width: 25px;
    height: 25px;
    background: #dfe8f6;
    font-size: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #465d81 !important;
    border-radius: 50%;
    text-align: center;
    line-height: 27px;
    margin: 0 auto;
}
.vipBox span {
    width: 48px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 17px;
    opacity: 0.5;
    text-align: center;
}

.vipBox .imgBg {
    width: 70px;
    height: 70px;
    background: #dfe8f6;
    opacity: 0.2;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.divider {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #465d81;
    top: 33%;
}
.width33 {
    flex: 0 0 33.3%;
}
</style>
